<template>
  <div>
    <p>
      <!-- <span @click="rem">本店推荐</span>
      <span @click="">猜你喜欢</span> -->
    </p>
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item>
        <ul class="rec">
          <li v-for="item in recommendData1" v-bind:key="item.index">
            <img v-bind:src="item.goods_thumb" alt="" />
            <span class="p">{{ item.goods_name }}</span>
          </li>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul class="rec">
          <li v-for="item in recommendData2" v-bind:key="item.index">
            <img v-bind:src="item.goods_thumb" alt="" />
            <span class="p">{{ item.goods_name }}</span>
          </li>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul class="rec">
          <li v-for="item in recommendData3" v-bind:key="item.index">
            <img v-bind:src="item.goods_thumb" alt="" />
            <span class="p">{{ item.goods_name }}</span>
          </li>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul class="rec">
          <li v-for="item in recommendData4" v-bind:key="item.index">
            <img v-bind:src="item.goods_thumb" alt="" />
            <span class="p">{{ item.goods_name }}</span>
          </li>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul class="rec">
          <li v-for="item in recommendData5" v-bind:key="item.index">
            <img v-bind:src="item.goods_thumb" alt="" />
            <span class="p">{{ item.goods_name }}</span>
          </li>
        </ul>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      recommendData: '',
      recommendData1: '',
      recommendData2: '',
      recommendData3: '',
      recommendData4: '',
      recommendData5: '',
    }
  },
  methods: {
    recommend() {
      this.$store
        .dispatch({
          type: 'getRecommend',
        })
        .then((data) => {
          this.recommendData = data
          this.recommendData1 = data.slice(0, 6)
          this.recommendData2 = data.slice(6, 12)
          this.recommendData3 = data.slice(12, 18)
          this.recommendData4 = data.slice(18, 24)
          this.recommendData5 = data.slice(24, 30)
        })
    },
  },
  mounted() {
    this.recommend()
  },
}
</script>
<style lang="less" scoped>
.my-swipe .van-swipe-item {
  // color: #fff;
  font-size: 20px;
  // line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}
.rec {
  padding: 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  li {
    box-sizing: border-box;
    padding: 0 0.5rem;
    width: 33.3%;
    .p {
      height: 3.8rem;
      margin-top: 1rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      font-weight: 400;
      font-size: 1.4rem;
      -webkit-font-smoothing: antialiased;
    }
    img {
      width: 100%;
    }
  }
}
</style>
